﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>about</title>
     <link href="../../Content/element-ui/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/vue-2.6.11/dist/vue.min.js" type="text/javascript"></script>
    <script src="../../Content/element-ui/lib/index.js" type="text/javascript"></script>
    <script src="../../Content/axios/dist/axios.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.UEDITOR_HOME_URL = "/ueditor/";
    </script>
    <script src="/ueditor/editor_config.js" type="text/javascript"></script>
    <script src="/ueditor/editor_all_min.js" type="text/javascript"></script>
    <link href="/ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="app">
      <el-form ref="form" :model="form" :rules="rules" size="small" style="margin-top:50px;width:800px;" label-width="80px">
       <el-form-item label="标题" prop="title">
         <el-input v-model="form.title" maxlength="200" show-word-limit ></el-input>
      </el-form-item>
    <el-form-item label="作者">
         <el-input v-model="form.author" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="来源">
         <el-input v-model="form.source" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="点击次数" prop="hitcount">
        <el-input-number v-model="form.hitcount" id="edit" :min="1" :max="100000000" required=true></el-input-number>
      </el-form-item>
       <el-form-item label="推荐图片">
      <el-upload
  action="/ueditor/net/imageUp.ashx"
  list-type="picture-card"
  :limit="1"
  :file-list="fileList"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
   :on-exceed="handleExceed"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
 </el-form-item>


  <div class="el-form-item el-form-item--small">
  <label class="el-form-item__label" style="width: 80px;">内容</label>
   <div id="editor"  style="height:310px;width:100%;margin-bottom:0px;margin-left: 80px;"></div>
  </div>
  
  <el-form-item label="发布时间"  prop="adddate">
  <el-date-picker
      v-model="form.adddate"
      type="date"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
  </el-form-item>

   <el-form-item>
    <el-button type="primary" icon="el-icon-back" v-on:click="goback">返回上一页</el-button>
    <el-button type="primary" icon="el-icon-circle-check" v-on:click="onSubmit('form')">保存</el-button>
    
  </el-form-item>
  </el-form>


    </div>
     <script type="text/javascript">
        

		new Vue({
            el : '#app',
            data(){
                return {
                    form : 
                    {
                        title : '',
                        id:@ViewBag.id,
                        typeid:@ViewBag.typeid,
                        hitcount :100,
                        source:'官网',
                        author:'管理员',
                        tjpic:'',
                        contentinfo : '',
                        adddate :'',
                    },
                    fileList:[],
                    dialogImageUrl: '',
                    dialogVisible: false,
					ueditor : null,
                    rules : 
                    {
                        title : [{
                            required : true,
                            message : '请输入标题',
                            trigger : 'blur'
                        }],
                        hitcount : [{
                            required : true,
                            message : '请输入点击次数',
                            trigger : 'blur'
                        }],
                        adddate : [{
                            required : true,
                            message : '请输入更新时间',
                            trigger : 'blur'
                        }]
                    }
                }
            },
            created() {
                let that=this;
				this.ueditor = new baidu.editor.ui.Editor({
                    //实例化编辑器
                     iframeCssUrl: '/ueditor/themes/default/iframe.css',
                    toolbars : [['fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'forecolor', 'backcolor', '|', 'superscript', 'subscript', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'insertorderedlist', 'insertunorderedlist', '|', 'indent', '|', 'removeformat', 'formatmatch', 'autotypeset', '|', 'pasteplain', '|', 'customstyle', 'paragraph', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontfamily', 'fontsize', '|', 'insertimage', 'attachment', 'insertvideo', 'map', 'horizontal', '|', 'link', 'unlink']],
                    initialContent : '',
                    autoHeightEnabled : false,
                    minFrameHeight : 250,
                    pasteplain : false,
                    wordCount : false,
                    elementPathEnabled : false,
                    autoClearinitialContent : false,
                    filePath : "",
                    imagePath : "",
                    imageManagerPath : "/"
                });
                this.ueditor.render('editor');
                this.ueditor.addListener('ready', function () {
            	   that.ueditor.setContent(that.form.contentinfo)
                 });
				let dt = new Date();
                //实例化时间对象
                let y = dt.getFullYear();
                let m = dt.getMonth() + 1;
                let d = dt.getDate();
                this.form.adddate=y + '-' + m + '-' + d; 
                this.loadinfo();
                //将编译器渲染到容器
//               this.ueditor.setContent(this.form.contentinfo);
//               console.log(this.ueditor.getContent());
            },
            methods : 
            {
                onSubmit(formName){
					var that = this;
                    this.$refs[formName].validate((valid) => 
                    {
                        if(valid){
                       that.form.contentinfo=this.ueditor.getContent();
                         axios.post('/News/saveNews',that.transformRequest(that.form)).then(function(response){
                           console.log(response.data)
							 var result=JSON.parse(response.data);                        
                            if(result.success){
								that.$message({
                                    message : "保存成功",
                                    type : 'success',
                                    duration:'500',
                                    onClose:function(){
                                        window.history.back(-1); 
                                    }
                                });
                            }
                            else{
                               that.$message.error("保存失败");
                            }
                            
                        }).catch(function(error){
                            console.log(error);
                        });
                        }
                        else{
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
				transformRequest(data){
                    let params = '';
                    for(let index in data){
                        params += index + '=' + data[index] + '&';
                    }
                    return params;
                },
                loadinfo(){
                   let that=this;
                   axios.post('/News/getinfo',that.transformRequest({id:that.form.id})).then(function(response){
                             if(response.data!=""){
				 			 that.form=response.data;
                             if(that.form.tjpic!="" && that.form.tjpic!=null){
                             that.fileList=[{url:that.form.tjpic}]
                             }
                             that.ueditor.setContent(that.form.contentinfo);
                             }
                        })
                

                },goback(){
                    window.history.back(-1); 
                },
				handleRemove(file, fileList){
                   this.form.tjpic="";
                },
                handlePictureCardPreview(file){
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                 handleExceed(files, fileList) {
                      this.$message.warning(`当前限制只能选择1个文件!`);
					
                },
                handleAvatarSuccess(res, file){
                   let result=eval('(' + res + ')');
                   this.form.tjpic=result.url;
                  //  this.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file){
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 1;
                    
                    if( ! isJPG){
                        this.$message.error('上传图片只能是 JPG 格式!');
                    }
                    if( ! isLt2M){
                        this.$message.error('上传图片大小不能超过1MB!');
                    }
                    return isJPG && isLt2M;
                }

                
            }
        });




    </script>
</body>
</html>
